<template>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'OneWayBindingChildren',
  // 字符串数组声明props，无法进行类型校验
  // props: ['propsNumber', 'propsString'],

  // 对象声明props（常用）
  // 声明Number、String、Boolean、Array、Object、Function、Class、Date、Symbol等数据类型
  // 未传入的Boolean类型props默认值false，其他类型props默认值为undefined，可通过default设定默认值
  // 若传递错误数据类型的props将给出警告，若传递的props为null或undefined将跳过任何类型检查
  // 校验过程发生于组件实例被创建以前，实例中data、methods和computed等在props中不可用
  props: {
    // 一种确定的类型
    propsOneTypeString: String,
    propsOneTypeNumber: Number,
    propsOneTypeBoolean: Boolean,
    propsOneTypeArray: Array,
    propsOneTypeObject: Object,

    // 多种可能的类型，注意父组件传入属性名但未给值时赋值只与String和Boolean属性相关，若String在Boolean前则转为空字符串，若Boolean在String前则传为true
    propsManyTypeA: [String, Number, Boolean],
    propsManyTypeB: [Boolean, Number, String],

    // 对象形式配置更多
    propsBasicTypeItem: {
      type: [Number, String, Boolean], // 数据类型
      required: true, // 是否必传
      default: 100, // 默认值。Number、String、Boolean类型的默认值可直接定义
    },
    propsOtherTypeItem: {
      type: Object,
      default: () => { // 默认值。Array、Object、Function类型的默认值以函数形式返回
        return {
          name: 'SongYaXuan',
          age: '19',
        };
      },
    },

    // 自定义类型校验函数
    propsValidate: {
      type: String,
      validator(value) {
        return ['TNT', 'SYX'].includes(value);
      }
    }
  },
  created() {
    console.log('一种确定的类型String', this.propsOneTypeString); // one definite type string（不传默认undefined）
    console.log('一种确定的类型Number', this.propsOneTypeNumber); // 200（不传默认undefined）
    console.log('一种确定的类型Boolean', this.propsOneTypeBoolean); // true（不传默认false）
    console.log('一种确定的类型Array', this.propsOneTypeArray); // ['A', 'B', 'C']（不传默认undefined）
    console.log('一种确定的类型Object', this.propsOneTypeObject); // {name: 'SYX', age: 19}（不传默认undefined）

    console.log('多种可能的类型[String, Number, Boolean]', this.propsManyTypeA); // 空字符串（不传默认false）
    console.log('多种可能的类型[Boolean, Number, String]', this.propsManyTypeB); // true（不传默认false）

    console.log('对象形式配置更多[Number, String, Boolean]', this.propsBasicTypeItem); // false（不传默认false）
    console.log('对象形式配置更多Object', this.propsOtherTypeItem); // {name: 'SongYaXuan', age: '19'}

    console.log('自定义类型校验函数String', this.propsValidate); // TYT（不传默认undefined）
    // Invalid prop: custom validator check failed for prop "propsValidate"
  }
});
</script>

<style scoped>

</style>